<script>
import { defineComponent } from "vue";
import { PowerData, loginData } from "@/api/power";

export default defineComponent({
  data() {
    return {
      // 权限列表
      tableData: [],
      // 控制分页当前页数
      currentPage: 1,
    };
  },
  mounted() {
    // 发送权限请求
    PowerData({
      type: "list",
    }).then((res) => {
      this.tableData = res.data.data;
    });

    loginData({
      username: "admin",
      password: "123456",
    }).then((res) => {
      window.localStorage.setItem("token", res.data.data.token);
    });
  },
  computed: {
    // 控制分页
    adminListCom() {
      return this.tableData.slice(
        (this.currentPage - 1) * 8,
        (this.currentPage - 1) * 8 + 8
      );
    },
  },
});
</script>

<template>
  <h1>权限列表</h1>
  <el-table :data="adminListCom" border style="width: 100%">
    <el-table-column align="center" type="index" label="序号" width="70" />
    <el-table-column
      align="center"
      prop="authName"
      label="权限名称"
      width="410"
    />
    <el-table-column align="center" prop="level" label="权限等级" width="410">
      <template #default="data">
        <el-tag type="success" v-if="data.row.level === '0'">一级权限</el-tag>
        <el-tag type="warning" v-else-if="data.row.level === '1'">二级权限</el-tag>
        <el-tag type="danger" v-else>三级权限</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="path" align="center" label="访问路径" width="410" />
  </el-table>

  <!--分页展示 -->
  <el-pagination
    style="margin-top: 30px; padding-bottom: 90px"
    background
    layout="prev, pager, next"
    :total="tableData.length"
    v-model:current-page="currentPage"
  />
</template>
